<template lang="html">
  <section class="components-select_data_book">
  	<div class="court_detail-divline">
        <span>Booking</span>
  	</div>
    <div class="content_select">
    	<div class="item_select" v-for="item in bookDate" :key="item.book_id" @click="$router.push({ path: `/book/${item.book_id}` })">
    		<p>{{item.date}}</p>
    		<p>{{item.date_week}}</p>
    	</div>
    </div>
  </section>
</template>

<script>
export default {
  props: {
    bookDate: {
    	type: Array,
    	requried: true
    }
  },
  data () {
    return {
    }
  }
}
</script>

<style lang="scss" scoped>
	.content_select{
		width: 100%;
		margin-left:5px;
		overflow-x: scroll;
		white-space: nowrap;
		overflow-y: hidden;
		height: 120px;
		padding-bottom: 17px;
		.item_select{
			background-image: linear-gradient(0deg, #ff490a 0%, #ff505c 100%);
			display: inline-block;
			color: white;
			height: 100%;
			width: 190px;
			border-radius: 18px;
			margin-left: 20px;
			text-align: center;
			p{
				margin-bottom: 10px;
				font-size: 29px;
			}
			p:nth-child(1){
				margin-top: 28px;
			}

		}
	}
	.court_detail-divline{
	    position: relative;
	    margin: 30px 0;
	    width: 100%;
	    height: 1px;
	    padding: 10px 0;
	    border-top: 1px solid #FF4907;
	    span{
	      position: absolute;
	      top: 0%;
	      left: 50%;
	      transform: translate(-50%, -50%);
	      display: block;
	      padding: 0 40px;
	      font-size: 24px;
	      color: #ff4907;
	      background-color: #494b47;
	    }
    }
	.court_detail-courseList{
	padding-bottom: 25px;
	}
</style>
